<template>
  <div>
    <h2>World</h2>
    <button @click="fn1">触发自定义的 change</button>

    <button @click="fn2">触发自定义的 click</button>
  </div>
</template>

<script>
export default {
  /**
   * 用于声明组件内会触发的自定义事件，也就是 this.$emit(eventName)
   * 
   * 语法：
   *    一、数组语法
   *      emits: ['eventName1', 'eventName2']
   * 
   *    二、对象语法
   *      emits: {
   *        key: value
   *      }
   *      key - 事件名字
   *      value - 是个 null 或者 验证函数
   *      
   *      验证函数会收一个参数，参数值是触发该事件时传递的payload。可以在验证函数中返回Boolean值来控制验证是否通过
   *       
   *  问题：Vue3 提供了 emits 选项， 我可以不用嘛？
   *  答案：可以，但是在某种情况下可能会出现一些异常现象，所以建议组件内触发的自定义事件都通过 emits 选项声明。
   *       异常现象：比如触发一个click这种原生就存在的事件时。会导致触发函数两次的问题
   */
  // emits: ['change'],
  // emits: {
  //   change(value) {
  //     console.log('校验函数value', value)
  //     if (value % 2 === 0) {
  //       return true
  //     }
  //     return false
  //   }
  // },

  methods: {
    fn1() {
      this.$emit('change')
    },

    fn2() {
      this.$emit('click')
    }
  }
}
</script>